<script setup>
import { io } from "socket.io-client";
import { onMounted, ref } from 'vue'
import { Calendar, Search } from '@element-plus/icons-vue'
import axios from '../../utils/axios'
import { useRouter } from 'vue-router'
const router = useRouter()

const input = ref('')
const otheruserlist = ref([])
const chatlist = ref([])
const getuser = async () => {
    const { data: { code, msg, data } } = await axios.get('/getUser')
    console.log(data);
    if (code === 200) {
        let user = JSON.parse(localStorage.getItem('user'))
        otheruserlist.value = data.filter(ele => ele._id !== user._id)
        console.log(otheruserlist.value)
    }
}
const getchat = async () => {
    const { data: { code, msg, list } } = await axios.get('/chatList')
    if (code === 200) {
        chatlist.value = list
        console.log(chatlist.value)
    }
}
onMounted(() => {
    getuser()
    getchat()

})
const goTochatList = async (ele) => {

    localStorage.setItem('ele', JSON.stringify(ele))
    // 登陆的用户信息
    let user = JSON.parse(localStorage.getItem('user'))

    let obj1 = {
        leftId: ele._id,
        leftName: ele.name,
        leftAvatar: ele.avatar,
        leftPhone: ele.phone,
        rightId: user._id,
        rightName: user.name,
        rightAvatar: user.avatar,
        rightPhone: user.phone,
        chatContent: [],
        roomId:ele._id+user._id

    }
    let obj2 = {
        leftId:user._id,
        leftName:user.name, 
        leftAvatar: user.avatar,
        leftPhone: user.phone,
        rightId:ele._id, 
        rightName: ele.name,
        rightAvatar: ele.avatar,
        rightPhone: ele.phone,
        chatContent: [],
        roomId:ele._id+user._id

    }
    if(chatlist.value.length){
        let arr=chatlist.value.filter(item=>item.leftId===ele._id&&item.rightId===user._id)
        if(!arr.length){
            await axios.post('/addChat',obj1)
            await axios.post('/addChat',obj2)
        }
    }else{
        await axios.post('/addChat',obj1)
        await axios.post('/addChat',obj2)
    }
    router.push('/chatlist')
    localStorage.setItem('roomId', ele._id+user._id)
}
</script>

<template>
  
    <div class="search">
        <div id="title">消息</div>
        <el-input id="searchinput" v-model="input" style="width: 220px" placeholder="搜索">
            <template #prefix>
                <el-icon class="el-input__icon">
                    <search />
                </el-icon>
            </template>
        </el-input>
        <img id="clear" src="@/assets/messagelist/clear.png" alt="">
        <div id="all">全部已读</div>
    </div>
    <div class="buttons">
        <img id="bluecircle" src="@/assets/messagelist/bluecircle.png" alt="">
        <img id="car" src="@/assets/messagelist/car.png" alt="">
        <p id="title">物流信息</p>
        <img id="yellowcircle" src="@/assets/messagelist/yellowcircle.png" alt="">
        <img id="tag" src="@/assets/messagelist/tag.png" alt="">
        <p id="activist">活动优惠</p>
    </div>
    <div class="items" v-for="ele in otheruserlist" :key="ele._id" @click="goTochatList(ele)">
        <img class="img" :src="ele.avatar" alt="">
        <p id="title">{{ ele.name }}</p>
        <p id="content">你好，欢迎光临~</p>
        <p id="time">5-15</p>
        <!-- <img id="redcircle" src="@/assets/messagelist/redcircle.png" alt=""> -->
    </div>

</template>

<style scoped lang="less">

.search {
    margin-left: 8px;
    height: 50px;
    width: 375px;
    position: relative;

    #title {
        position: absolute;
        left: 15px;
        top: 11px;
        width: 40px;
        height: 28px;
        line-height: 28px;
        color: rgb(16, 16, 16);
        font-size: 20px;
        text-align: left;
        font-family: PingFangSC-regular;
    }

    .el-input {
        position: absolute;
        left: 65px;
        top: 9px;
        width: 220px;
        height: 30px;
        line-height: 20px;
        border-radius: 50px;
        background-color: blue;
        color: rgba(16, 16, 16, 1);
        font-size: 14px;
        text-align: center;
        font-family: Roboto;


    }

    #clear {
        position: absolute;
        left: 297px;
        top: 14px;
        width: 20px;
        height: 20px;

    }

    #all {
        position: absolute;
        left: 322px;
        top: 15px;
        width: 48px;
        height: 17px;
        line-height: 17px;
        color: rgb(16, 16, 16);
        font-size: 12px;
        text-align: left;
        font-family: PingFangSC-regular;
    }
}

.buttons {
    position: relative;
    margin: 10px 0 10px 23px;
    width: 345px;
    height: 100px;
    line-height: 20px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    text-align: center;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
    font-family: Roboto;

    #bluecircle {
        position: absolute;
        top: 30px;
        left: 35px;
        width: 40px;
        height: 40px;
        line-height: 20px;
        background-color: rgba(49, 175, 252, 1);
        color: rgba(16, 16, 16, 1);
        font-size: 14px;
        text-align: center;
        font-family: Roboto;
        border-radius: 50px;
    }

    #car {
        position: absolute;
        top: 40px;
        left: 45px;
        width: 20px;
        height: 20px;
    }

    #yellowcircle {
        position: absolute;
        top: 30px;
        left: 204px;
        width: 40px;
        height: 40px;
        line-height: 20px;
        background-color: rgba(254, 196, 19, 1);
        color: rgba(16, 16, 16, 1);
        font-size: 14px;
        text-align: center;
        font-family: Roboto;
        border-radius: 50px;
    }

    #tag {
        position: absolute;
        top: 40px;
        left: 214px;
        width: 20px;
        height: 20px;
    }

    #title {
        position: absolute;
        top: 40px;
        left: 85px;
        width: 56px;
        height: 20px;
        line-height: 20px;
        color: rgb(16, 16, 16);
        font-size: 14px;
        text-align: left;
        font-family: PingFangSC-regular;
    }

    #activist {
        position: absolute;
        top: 40px;
        left: 254px;
        width: 56px;
        height: 20px;
        line-height: 20px;
        color: rgb(16, 16, 16);
        font-size: 14px;
        text-align: left;
        font-family: PingFangSC-regular;
    }
}

.items {
    margin: 0 7px 0 8px;
    position: relative;
    width: 375px;
    height: 80px;
    line-height: 20px;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    text-align: center;
    font-family: Roboto;

    .img {
        position: absolute;
        top: 15px;
        left: 15px;
        width: 50px;
        height: 50px;
        border-radius: 50px;
        background-color: rgba(255, 255, 255, 1);
    }

    #title {
        position: absolute;
        top: 19px;
        left: 74px;
        width: 112px;
        height: 22px;
        line-height: 22px;
        color: rgb(16, 16, 16);
        font-size: 16px;
        text-align: left;
        font-family: PingFangSC-regular;
    }

    #content {
        position: absolute;
        top: 49px;
        left: 74px;
        width: 180px;
        height: 17px;
        line-height: 17px;
        color: rgb(140, 140, 140);
        font-size: 12px;
        text-align: left;
        font-family: PingFangSC-regular;
    }

    #time {
        position: absolute;
        top: 15px;
        left: 323px;
        width: 37px;
        height: 17px;
        line-height: 17px;
        color: rgb(140, 140, 140);
        font-size: 12px;
        text-align: right;
        font-family: PingFangSC-regular;
    }

    #redcircle {
        position: absolute;
        top: 46px;
        left: 336px;
    }


}
</style>